<template>
	<view class="login-box">
		<view class="admin-logo"><image :src="logo" mode="heightFix"></image></view>
		<view class="uni-header no-padding"><view class="uni-title">系统登录</view></view>
		<view class="uni-container">
			<uni-forms ref="form" v-model="formData" :rules="rules" @submit="submit">
				<uni-forms-item left-icon="person-filled" name="username" labelWidth="35">
					<input ref="usernameInput" @confirm="submitForm" class="uni-input-border" type="text" placeholder="账户" v-model="formData.username" />
				</uni-forms-item>
				<uni-forms-item left-icon="locked-filled" class="icon-container" name="password" labelWidth="35">
					<input ref="passwordInput" @confirm="submitForm" class="uni-input-border" :password="showPassword" placeholder="密码" v-model="formData.password" />
					<text class="uni-icon-password-eye pointer" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
				</uni-forms-item>
				<uni-forms-item v-if="needCaptcha" left-icon="image" class="icon-container" name="captcha" labelWidth="35">
					<input ref="captchaInput" @confirm="submitForm" class="uni-input-border" type="text" placeholder="验证码" v-model="formData.captcha" />
					<view class="admin-captcha-img pointer" @click="createCaptcha">
						<i v-if="captchaLoading" class="uni-loading"></i>
						<img v-else :src="captchaBase64" width="100%" height="100%" />
					</view>
				</uni-forms-item>
				<view class="uni-button-group">
					<button class="uni-button uni-button-full" type="primary" :loading="loading" :disabled="loading" @click="submitForm">登录</button>
				</view>
			</uni-forms>
			<view class="uni-tips"><text class="uni-tips-text" @click="initAdmin">如无管理员账号，请先创建管理员...</text></view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
import config from '@/admin.config.js';
import { getDeviceUUID } from '@/js_sdk/uni-admin/util.js';

const captchaOptions = {
	deviceId: getDeviceUUID(),
	scene: 'login'
};

export default {
	data() {
		return {
			...config.navBar,
			indexPage: config.index.url,
			showPassword: true,
			loading: false,
			formData: {
				username: '',
				password: '',
				captchaText: ''
			},
			captchaLoading: false,
			needCaptcha: false,
			captchaBase64: '',
			rules: {
				// 对name字段进行必填验证
				username: {
					rules: [
						{
							required: true,
							errorMessage: '请输入账户'
						},
						{
							minLength: 1,
							maxLength: 30,
							errorMessage: '账户长度在{minLength}到{maxLength}个字符'
						}
					]
				},
				// 对email字段进行必填验证
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请输入正确的密码'
						},
						{
							minLength: 6,
							errorMessage: '密码长度大于{minLength}个字符'
						}
					]
				},
				// 对email字段进行必填验证
				captchaText: {
					rules: [
						{
							required: true,
							errorMessage: '请输入验证码'
						}
					]
				}
			}
		};
	},
	mounted() {
		// #ifdef H5
		this.focus();
		// #endif
		const self = this;
		uni.getStorage({
			key: 'lastUsername',
			success: function(res) {
				self.formData.username = res.data;
			}
		});
		this.getNeedCaptcha();
	},
	methods: {
		...mapActions({
			init: 'app/init'
		}),
		...mapMutations({
			setToken(commit, tokenInfo) {
				commit('user/SET_TOKEN', tokenInfo);
			},
			setUserInfo(commit, userInfo) {
				commit('user/SET_USER_INFO', userInfo);
			}
		}),
		submit(event) {
			if (this.loading) {
				return;
			}
			const { errors, value } = event.detail;
			if (errors) {
				return;
			}
			// #ifdef H5
			this.$refs.usernameInput.$refs.input.blur();
			this.$refs.passwordInput.$refs.input.blur();
			// #endif
			this.loading = true;
			this.$request('user/login', {
				...value,
				captchaOptions
			})
				.then(res => {
					if (res.needCaptcha) {
						this.needCaptcha = true;
						this.captchaBase64 = res.captchaBase64;
					} else {
						this.setToken({
							token: res.token,
							tokenExpired: res.tokenExpired
						});

						return this.init().then(() => {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							uni.setStorage({
								key: 'lastUsername',
								data: value.username
							});
							const userInfo = res.userInfo;
							uni.setStorageSync('userInfo', userInfo);
							this.$http
								.getDB('opendb-admin-log')
								.add({
									content: '登录',
									create_date: userInfo.last_login_date,
									ip: userInfo.last_login_ip,
									user_name: userInfo.username,
									user_id: userInfo._id
								})
								.then(() => {
									uni.redirectTo({
										url: this.indexPage
									});
								});
						});
					}
				})
				.catch(err => {
					if (err.needCaptcha) {
						this.formData.captchaText = '';
						this.createCaptcha();
						// this.$refs.captchaInput.$refs.input.focus()
					}
				})
				.finally(err => {
					this.loading = false;
				});
		},

		createCaptcha() {
			this.captchaLoading = true;
			this.$request('user/createCaptcha', captchaOptions)
				.then(res => {
					if (res.code === 0) {
						this.needCaptcha = res.needCaptcha;
						this.captchaBase64 = res.captchaBase64;
					}
				})
				.catch(err => {})
				.finally(err => {
					this.captchaLoading = false;
				});
		},

		getNeedCaptcha() {
			this.$request('user/getNeedCaptcha', captchaOptions)
				.then(res => {
					if (res) this.createCaptcha();
				})
				.catch(err => {})
				.finally(err => {});
		},

		confirmForm(name, value) {
			// this.binddata(name, value)
			this.submitForm();
		},
		submitForm() {
			this.$refs.form.submit();
		},
		initAdmin() {
			uni.redirectTo({
				url: '/pages/demo/init/init'
			});
		},
		changePassword: function() {
			this.showPassword = !this.showPassword;
		},
		// #ifdef H5
		focus: function() {
			this.$refs.usernameInput.$refs.input.focus();
		}
		// #endif
	}
};
</script>

<style>
page {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	background-color: #fff;
}

.login-box {
	position: relative;
	max-width: 350px;
	flex: 1;
	padding: 140px 35px 0;
	margin: 0 auto;
	overflow: hidden;
	/* background-color: #F5F5F5; */
}

.underline:hover {
	text-decoration: underline;
}

.uni-tips {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
}

.uni-tips-text {
	cursor: pointer;
	text-decoration: underline;
	font-size: 13px;
	color: #007aff;
	opacity: 0.8;
}

.no-padding {
	padding: 0;
}

.admin-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.admin-logo image {
	height: 40px;
}

.admin-captcha-img {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	width: 100px;
	height: 33px;
	border: 1px #e5e5e5 solid;
	border-radius: 0 5px 5px 0;
	background-color: #f9f9f9;
}
.admin-captcha-img img {
	border-radius: 5px;
}

.uni-loading:before {
	background: rgba(0, 0, 0, 0)
		url('')
		no-repeat;
}

.uni-loading {
	margin: 0 auto;
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: uni-loading 1s steps(12) infinite;
	animation: uni-loading 1s steps(12) infinite;
	background-size: 100%;
}

@-webkit-keyframes uni-loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@keyframes uni-loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
</style>
